<template>
  <MainLayout :title="pageTitle" :breadcrumbItems="breadcrumbItems">
    <template #sidebar>
      <SideNav :items="navConfig" :active="currentNav.type" @select="handleSelect" />
    </template>
    
    <template #content>
      <slot name="content"></slot>
      <Pagination 
        v-if="showPagination"
        :current-page="currentPage" 
        :total-pages="totalPages"
        :base-url="`/${basePath}/${currentNav.type}`"
      />
    </template>
  </MainLayout>
</template>

<script setup>
const props = defineProps({
  pageTitle: String,
  navConfig: Array,
  basePath: String,
  showPagination: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const router = useRouter()
const currentPage = computed(() => parseInt(route.query.page) || 1)
const totalPages = ref(20)

const currentNav = computed(() =>
  props.navConfig.find(nav => nav.type === route.params.type) || props.navConfig[0]
)

const breadcrumbItems = computed(() => [
  { title: '首页', path: '/' },
  { title: props.pageTitle, path: `/${props.basePath}` },
  { title: currentNav.value.title }
])

const handleSelect = (type) => {
  router.push({
    path: `/${props.basePath}/${type}`,
    query: { page: 1 }
  })
}
</script>